<script setup>
import { ref } from 'vue'
import { isUrl } from './utils/isUrl'

import Head from './components/head.vue'
import LoadIcon from './components/loadIcon.vue'

import DownloadIcon from './assets/download_icon.png'
import ImgIcon from './assets/img_icon.png'

import {
  chooseSaveDir,
  getCrawlIng,
  noDir,
  chooseDir,
  startImage,
  imageNum,
  saveImage,
  errorImage,
} from './event/event'

const downloadNum = ref(0)
const ImgNum = ref(0)
const dirPath = ref('')
const crawlHttpUrl = ref('')
const startCrawlText = ref('开始爬取')
const imgFiles = ref([])
const isSaveDir = ref(false)
const isSave = ref(false)
const isInput = ref(false)
const isChooseDir = ref(false)

// 开始爬取
const startCraw = () => {
  if (!isUrl(crawlHttpUrl.value)) {
    isInput.value = true
    return
  }
  isInput.value = false
  if (!isSaveDir.value) {
    isChooseDir.value = true
    return
  }
  isChooseDir.value = false
  getCrawlIng(crawlHttpUrl.value)
}

// 没有选择保存的位置
noDir(() => {
  isSaveDir.value = false
})

// 选择保存的位置
chooseDir((dir) => {
  dirPath.value = dir
  isSaveDir.value = true
})

// 开始爬取
startImage(() => {
  isSave.value = true
  startCrawlText.value = '爬取中...'
})

// 爬取的图片数量
imageNum((num) => {
  ImgNum.value = num
})

// 保存的图片
saveImage((files) => {
  downloadNum.value = files.length
  if (files.length === ImgNum.value) {
    startCrawlText.value = '开始爬取'
    isSave.value = false
  } else {
    startCrawlText.value = '继续保存'
  }

  let newFiles = []
  files.forEach((path) => {
    newFiles.push(dirPath.value + '\\' + path)
  })
  imgFiles.value = newFiles
})

// 爬取错误重新爬取
errorImage(() => {
  if (crawlHttpUrl.value === '') {
    return
  }
  getCrawlIng(crawlHttpUrl.value)
})
</script>

<template>
  <div class="app">
    <Head />
    <div class="content-box">
      <div class="content-left">
        <div class="left-box">
          <div class="box-itme">
            <span class="itme-title">网站地址</span>
            <input
              v-model="crawlHttpUrl"
              :style="isInput ? `border: 2px solid #f00` : ''"
              class="itme-input"
              type="text"
            />
          </div>
          <div class="box-itme">
            <span class="itme-title">保存位置</span>
            <button
              v-if="dirPath == ''"
              class="choose-dir"
              :style="isChooseDir ? `border: 2px solid #f00` : ''"
              @click="chooseSaveDir"
            >
              未选择保存位置
            </button>
            <span v-else class="choose-dir" @click="chooseSaveDir">
              {{ dirPath }}
            </span>
          </div>
          <div class="box-itme">
            <span class="itme-title">爬取到的数据</span>
            <div class="itme-crawl-data">
              <div class="data-text">
                已爬取
                <img class="crawl-img-icon" :src="ImgIcon" />:{{ ImgNum }}
              </div>
              <div class="data-text">
                已保存
                <img class="crawl-dow-icon" :src="DownloadIcon" />:{{
                  downloadNum
                }}
              </div>
            </div>
          </div>
          <div class="box-itme">
            <button class="yes-crawl-btn" @click="startCraw">
              {{ startCrawlText }}
            </button>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="right-box">
          <div v-if="imgFiles.length > 0" class="box-itme">
            <img
              v-for="(itme, index) in imgFiles"
              :key="index"
              class="right-img"
              :src="itme"
            />
          </div>
          <div v-else class="box-itme centered">
            <LoadIcon v-if="isSave" class="load-icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(45deg, #29389c, #0076ba);
}
.content-box {
  width: 100%;
  height: calc(100% - 30px);
  display: flex;
}

.content-left {
  width: 280px;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.content-left .left-box {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}

.left-box .box-itme {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;

  display: flex;
  flex-direction: column;
}

.box-itme .itme-title {
  color: #fff;
  user-select: none;
}
.box-itme .choose-dir {
  border: 0;
  padding: 4px;
  font-size: 15px;
  overflow: hidden;
  color: #424242;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #bbb;
}
.box-itme .itme-input {
  border: 0;
  width: 100%;
  height: 32px;
  padding: 5px;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  box-sizing: border-box;
}

.box-itme .itme-crawl-data {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.itme-crawl-data .data-text {
  color: #fff;
  font-size: 18px;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.data-text .crawl-dow-icon,
.data-text .crawl-img-icon {
  user-select: none;
}

.data-text .crawl-dow-icon {
  width: 30px;
}
.data-text .crawl-img-icon {
  width: 30px;
}

.box-itme .yes-crawl-btn {
  border: 0;
  height: 40px;
  color: #fff;
  font-size: 18px;
  border-radius: 5px;
  user-select: none;
  background-color: #00aaff;
}

.content-right {
  flex: 1;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.content-right .right-box {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}

.right-box .box-itme {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  border-radius: 10px;
}

/* 自定义滚动条 */
.right-box .box-itme::-webkit-scrollbar {
  /* 控制横向滚动条的宽度 */
  width: 0px;
  /* 控制纵向滚动条的高度 */
  height: 0px;
  border-radius: 50px;
}
.right-box .box-itme::-webkit-scrollbar-thumb {
  /* 滑块的颜色 */
  background-color: transparent;
  /* 滑块的圆角 */
  border-radius: 50px;
}
.right-box .box-itme::-webkit-scrollbar-track {
  /* 滚动条背景色 */
  background-color: transparent;
}
.right-box .box-itme::-webkit-scrollbar {
  /* 去除系统默认的滚动条样式 */
  -webkit-appearance: none;
}

.right-box .centered {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.box-itme .load-icon {
  width: 50px;
  height: 50px;
  animation: rotate 2s linear infinite;
}

.right-box .right-img {
  width: 100%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
